<template lang="pug">
.cp-custom-type
  el-dialog.cus-pop(
    title="选择自定义分类",
    :visible="visible",
    @close="closeDialog",
    width="950px")
    .tree-wrap
      .tree-title
        div.tree-th(style="width: 280px") 名称
        div.tree-th(style="width: 98px") 分类码位数
        div.tree-th(style="width: 86px") 分类码值
        div.tree-th(style="width: 86px") 序号位数
        div.tree-th(style="width: 110px") 序号起始值
        div.tree-th(style="width: 110px") 序号截止值
        div.tree-th(style="width: 130px") 预览
      el-tree.tree-content(
        :data="treeData"
        ref="tree"
        node-key="id"
        v-loading="loading"
        default-expand-all
        show-checkbox
        check-on-click-node
        check-strictly
        @check-change="checkChange"
        @node-click="nodeClick"
        :expand-on-click-node="false")
        .custom-tree(slot-scope="{ node, data }")
          .tree-td.name.border(:style="calcWidth(data)")
            span.td-text {{ data.name }}
          .tree-td.ordinal.border(style="width: 98px")
            span.td-text(v-show="data.level") {{ data.ordinal }}
          .tree-td.prefix.border(style="width: 86px")
            span.td-text(v-show="data.level") {{ data.prefix }}
          .tree-td.snDigits.border(style="width: 86px")
            span.td-text(v-show="data.level") {{ data.snDigits }}
          .tree-td.snBeginning.border(style="width: 110px")
            span.td-text(v-show="data.level") {{ data.snBeginning }}
          .tree-td.snEnding.border(style="width: 110px")
            span.td-text(v-show="data.level") {{ data.snEnding }}
          .tree-td.preview.border(style="width: 130px")
            el-tooltip(placement="top", :content="previewText(data)", :disabled="previewText(data).length < 13")
              span.td-text {{ previewText(data) }}
    .dialog-footer(slot="footer")
      span.text
        span {{ selectText }}
      span.btn-wrap
        el-button(type="primary", plain, @click="cancel") 取消
        el-button(type="primary", @click="emitData") 保存
</template>

<script>
import ConfigApi from '@/api/config';

export default {
  name: 'customtype',
  props: {
    visible: Boolean,
    data: String
  },
  data() {
    return {
      loading: true,
      selectText: '未选择自定义分类',
      treeData: [
        { id: '1', name: '根节点', parent: null, children: [], level: 0 }
      ]
    };
  },
  watch: {
    data(newData) {
      if (newData) {
        this.editCheckId = newData;
        this.setChecked([newData]);
      } else {
        this.setChecked([]);
      }
    }
  },
  created() {
    // 文本缓存
    this.cache = {};
  },
  mounted() {
    this.loadSuppyChain();
  },
  methods: {
    setChecked(id) {
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedKeys(id);
      } else {
        setTimeout(() => {
          this.setChecked(id);
        }, 60);
      }
    },
    loadSuppyChain() {
      ConfigApi.getDataSupplyChainDetail().then((res) => {
        if (res.status === 0) {
          this.treeData = res.obj;
        } else {
          this.$message.error(res.comment);
        }
        this.loading = false;
      }).catch((error) => {
        this.loading = false;
        console.log(JSON.stringify(error));
      });
    },
    // 获取id文本
    getIdText(id) {
      if (this.$refs.tree) {
        return this.$refs.tree.getNode(id);
      }
    },
    // 获取父级的文本
    getParentText(data, id) {
      if (data.parent) {
        const pnode = this.getIdText(data.parent);
        if (pnode) {
          this.cache[id].push(pnode.data.prefix);
          this.getParentText(pnode.data, id);
        }
      }
    },
    // 预览文本
    previewText(data) {
      this.cache[data.id] = [];
      this.getParentText(data, data.id);
      const pStr = this.cache[data.id].reverse().join('');
      let str = '';
      if (data.snDigits) {
        for (let i = 0; i < parseInt(data.snDigits, 10); i++) {
          str += 'X';
        }
      }
      const preview = `${pStr}${data.prefix || ''}${str}`;
      this.$set(data, 'preview', preview);
      return preview;
    },
    // 计算名称偏移
    calcWidth(data) {
      const width = 234;
      const len = (data.level) * 18;
      return {
        width: `${width - len}px`
      };
    },
    // 选择改变时
    checkChange(data, checked) {
      if (this.editCheckId === data.id) {
        // 点击节点
        if (checked) {
          this.$refs.tree.setCheckedNodes([data]);
          this.selectText = data.name;
        } else {
          this.$refs.tree.setCheckedNodes([]);
          this.selectText = '未选择自定义分类';
        }
      } else {
        // 点击CheckBox
        if (checked) {
          this.editCheckId = data.id;
          this.$refs.tree.setCheckedNodes([data]);
          this.selectText = data.name;
        }
      }
    },
    // 点击节点
    nodeClick(data) {
      this.editCheckId = data.id;
    },
    // 确定选择
    emitData() {
      const data = this.$refs.tree.getCheckedNodes();
      if (data.length) {
        if (!data[0].level) {
          this.$message.error('不能选择根节点');
          return false;
        }
        this.$emit('submit', data[0]);
      } else {
        this.$emit('submit');
      }
    },
    // 取消
    cancel() {
      if (this.data) {
        // 有传入选择时
        this.editCheckId = this.data;
        this.$refs.tree.setCheckedKeys([this.data]);
        const node = this.$refs.tree.getNode(this.data);
        this.selectText = node.data.name;
      } else {
        // 清空选择
        this.$refs.tree.setCheckedNodes([]);
        this.selectText = '未选择自定义分类';
      }
      this.closeDialog();
    },
    // 关闭
    closeDialog() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="sass">
$HEIGHT: 40px
$BORDERCOLOR: #dcdfe6
.cp-custom-type
  .cus-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      width: 950px
      padding: 16px
    .el-dialog__footer
      padding-top: 0
      .el-button
        width: 80px
  .tree-wrap
    min-width: 900px
    margin-bottom: 15px
    border: 1px solid $BORDERCOLOR
    .tree-title
      width: 100%
      height: 38px
      line-height: 38px
      font-weight: 500
      border-bottom: 1px solid $BORDERCOLOR
      .tree-th
        display: inline-block
        text-align: center
        font-size: 12px
        line-height: 38px
        color: #909399
        font-weight: 700
        border-right: 1px solid $BORDERCOLOR
        &:last-child
          border-right: none
    .tree-content
      max-height: 360px
      overflow-y: auto
      overflow-x: hidden
    .el-tree-node__content
      height: $HEIGHT
    .el-tree-node:focus>.el-tree-node__content, .el-tree-node__content:hover
      // background-color: transparent
    .custom-tree
      flex: 1
      display: flex
      align-items: center
      font-size: 12px
      height: $HEIGHT
      line-height: $HEIGHT
      .tree-td
        width: 92px
        height: 32px
        line-height: 32px
        &.border
          border: 1px solid $BORDERCOLOR
          border-left: none;
        &.border.name
          border-left: 1px solid $BORDERCOLOR
        &.action
          border: none
        &.preview
          white-space: nowrap
          word-break: break-all
          overflow: hidden
          text-overflow: ellipsis
          &.none
            border: none
        .td-text
          line-height: 32px
          padding: 0px 15px
  .dialog-footer
    height: 40px
    .text
      display: inline-block
      width: 50%
      height: 32px
      line-height: 32px
      text-align: center
      color: #606266
      border: 1px solid $BORDERCOLOR
    .btn-wrap
      display: inline-block
      width: 50%
      text-align: right
</style>
